<template>
	<view class="page" :style="'background-image: url('+indexBg+');'">
    <u-navbar :fixed="false" leftIcon=" " :autoBack="false" title="企业信息" titleStyle ="color: #fff;" placeholder bgColor="transparent">
      <view class="nav-version" slot="left">{{ enterpriseInfo == null || enterpriseInfo.versionType == "1" || enterpriseInfo.versionType == null ? "试用版" : "正式版"}}</view>
    </u-navbar>
    <view class="validity-info" @click="jumpTo('/other/enterpriseInfo/myEnterprise')">
      <view class="info">
        <image class="logo" :src="enterpriseInfo.logo? baseUrl + enterpriseInfo.logo:'https://gowork365.com/prod-api/profile/mini/index/enterpriseLogo.png'" />
        <view class="name u-line-1">{{ enterpriseInfo.enterpriseName }}</view>
        <view class="time">{{ formatTimeTwo(enterpriseInfo.effectiveTime, 'Y-M-D') }}到期</view>
      </view>
      <u-icon name="arrow-right" color="#d89c2d" size="24rpx"></u-icon>
    </view>
    <view class="icon-box">
      <view class="icon-list">
        <view class="icon-item" @click="jumpTo('/other/platform/platformList')">
          <image src="https://gowork365.com/prod-api/profile/mini/enterpriseInfo/icon1.png" mode="widthFix" />
          <view class="text">帐号管理</view>
        </view>
        <view class="icon-item" @click="jumpTo('/other/enterpriseInfo/platformRole')">
          <image src="https://gowork365.com/prod-api/profile/mini/enterpriseInfo/icon2.png" mode="widthFix" />
          <view class="text">权限管理</view>
        </view>
        <view class="icon-item" @click="jumpTo('/other/enterpriseInfo/sealInfo')">
          <image src="https://gowork365.com/prod-api/profile/mini/enterpriseInfo/icon3.png" mode="widthFix" />
          <view class="text">印章管理</view>
        </view>
      </view>
    </view>
    <view class="balance-box">
      <view class="u-flex u-row-between u-m-b-32">
        <view class="balance-title">
          <image src="https://gowork365.com/prod-api/profile/mini/enterpriseInfo/title1.png" mode="widthFix" />
          <text>权益套餐</text>
        </view>
        <view class="u-flex balance-record" @click="jumpTo('/other/enterpriseInfo/platformRightsOrder')">
          <text>充值记录</text>
          <u-icon name="arrow-right" color="rgba(0,0,0,0.5)" size="24rpx"></u-icon>
        </view>
      </view>
      <view class="balance-list">
        <view class="balance-item" :style="'background-image: url('+icon4+');'">
          <view class="title" style="color: #1D9DCD;">{{ enterpriseInfo.tryDays }}</view>
          <view class="subtitle">可使用天数</view>
        </view>
        <view class="balance-item" :style="'background-image: url('+icon5+');'">
          <view class="title" style="color: #E29139;">{{ enterpriseInfo.contractAllNum - enterpriseInfo.contractUseNum }}</view>
          <view class="subtitle">合同份数</view>
        </view>
        <view class="balance-item" :style="'background-image: url('+icon6+');'">
          <view class="title" style="color: #138E88;">{{ enterpriseInfo.smsAllNum - enterpriseInfo.smsUseNum }}</view>
          <view class="subtitle">短信条数</view>
        </view>
      </view>
      <view class="balance-btn" @click="jumpTo('/pages/enterpriseInfo/platfromEquity')">
        <image src="https://gowork365.com/prod-api/profile/mini/enterpriseInfo/btn.png" />
        <text>充值续费</text>
      </view>
      <view class="balance-btn u-m-t-20" @click="logout">
        <text>退出登录</text>
      </view>
    </view>
    <view class="order-box">
      <view class="u-flex u-row-between u-m-b-32">
        <view class="order-title">
          <image src="https://gowork365.com/prod-api/profile/mini/enterpriseInfo/title2.png" mode="widthFix" />
          <text>我的订单</text>
        </view>
        <view class="u-flex order-record" @click="jumpTo('/other/enterpriseInfo/myPlatformServiceOrder')">
          <text>查看详情</text>
          <u-icon name="arrow-right" color="rgba(0,0,0,0.5)" size="24rpx"></u-icon>
        </view>
      </view>
      <view class="order-list">
        <view class="order-item" :style="'background-image: url('+icon7+');'">
          <view class="title" style="color: #E29139;">{{ orderNum.waitPayCount }}</view>
          <view class="subtitle">待支付</view>
        </view>
        <view class="order-item" :style="'background-image: url('+icon8+');'">
          <view class="title" style="color: #138E88;">{{ orderNum.payCount }}</view>
          <view class="subtitle">已购买</view>
        </view>
      </view>
    </view>
    <view class="service-box">
      <view class="service-title">
        <image src="https://gowork365.com/prod-api/profile/mini/index/title2.png" mode="widthFix" />
        <text>平台服务</text>
      </view>
      <view class="service-list">
        <view class="service-item" @click.stop="jumpTo('/pages/webView/webView', {url: 'https://11092391.saas.53kf.com/code/xcx/bb6e2325e8f2435de273e8ef5ce483575/1'})">
          <image class="item-bg" src="https://gowork365.com/prod-api/profile/mini/index/service1.png" />
          <view class="item-content">
            <view>咨询律师</view>
            <image class="item-btn" src="https://gowork365.com/prod-api/profile/mini/index/toPage.png" mode="widthFix" />
          </view>
        </view>
        <view class="service-item" @click.stop="jumpTo('/pages/webView/webView', {url: 'https://11092391.saas.53kf.com/code/xcx/bb6e2325e8f2435de273e8ef5ce483575/2'})">
          <image class="item-bg" src="https://gowork365.com/prod-api/profile/mini/index/service2.png" />
          <view class="item-content">
            <view>股权架构</view>
            <image class="item-btn" src="https://gowork365.com/prod-api/profile/mini/index/toPage.png" mode="widthFix" />
          </view>
        </view>
        <view class="service-item" @click.stop="jumpTo('/pages/webView/webView', {url: 'https://11092391.saas.53kf.com/code/xcx/bb6e2325e8f2435de273e8ef5ce483575/1'})">
          <image class="item-bg" src="https://gowork365.com/prod-api/profile/mini/index/service3.png" />
          <view class="item-content">
            <view>合同审查</view>
            <image class="item-btn" src="https://gowork365.com/prod-api/profile/mini/index/toPage.png" mode="widthFix" />
          </view>
        </view>
        <view class="service-item" @click.stop="jumpTo('/pages/webView/webView', {url: 'https://11092391.saas.53kf.com/code/xcx/bb6e2325e8f2435de273e8ef5ce483575/3'})">
          <image class="item-bg" src="https://gowork365.com/prod-api/profile/mini/index/service4.png" />
          <view class="item-content">
            <view>薪酬规划</view>
            <image class="item-btn" src="https://gowork365.com/prod-api/profile/mini/index/toPage.png" mode="widthFix" />
          </view>
        </view>
        <view class="service-item" @click.stop="jumpTo('/pages/webView/webView', {url: 'https://11092391.saas.53kf.com/code/xcx/bb6e2325e8f2435de273e8ef5ce483575/2'})">
          <image class="item-bg" src="https://gowork365.com/prod-api/profile/mini/index/service5.png" />
          <view class="item-content">
            <view>合同定制</view>
            <image class="item-btn" src="https://gowork365.com/prod-api/profile/mini/index/toPage.png" mode="widthFix" />
          </view>
        </view>
        <view class="service-item" @click.stop="jumpTo('/pages/webView/webView', {url: 'https://11092391.saas.53kf.com/code/xcx/bb6e2325e8f2435de273e8ef5ce483575/3'})">
          <image class="item-bg" src="https://gowork365.com/prod-api/profile/mini/index/service6.png" />
          <view class="item-content">
            <view>人员激励</view>
            <image class="item-btn" src="https://gowork365.com/prod-api/profile/mini/index/toPage.png" mode="widthFix" />
          </view>
        </view>
      </view>
    </view>
    <customTabbar value="5" />
	</view>
</template>

<script>
import { statisticsServiceOrder, getMyEnterpriseInfo } from '@/api/index'
import customTabbar from '../../components/customTabbar.vue'
import { formatTimeTwo } from '@/common/util'

export default {
  components: {
    customTabbar,
  },
  data() {
    return {
      formatTimeTwo,
      indexBg: 'https://gowork365.com/prod-api/profile/mini/index/indexBg1.png',
      icon4: 'https://gowork365.com/prod-api/profile/mini/enterpriseInfo/icon4.png',
      icon5: 'https://gowork365.com/prod-api/profile/mini/enterpriseInfo/icon5.png',
      icon6: 'https://gowork365.com/prod-api/profile/mini/enterpriseInfo/icon6.png',
      icon7: 'https://gowork365.com/prod-api/profile/mini/enterpriseInfo/icon7.png',
      icon8: 'https://gowork365.com/prod-api/profile/mini/enterpriseInfo/icon8.png',
      baseUrl: this.baseUrl,
      enterpriseInfo: {},
      orderNum: {}
    }
  },
  onShow() {
    this.enterpriseInfo = uni.getStorageSync('enterpriseInfo')
    this.getForm()
    this.getOrderNum()
  },
  methods: {
    getForm() {
      getMyEnterpriseInfo({}).then(response => {
        this.enterpriseInfo = response.data;
        uni.setStorageSync('enterpriseInfo', response.data || {})
      });
    },
    getOrderNum() {
      statisticsServiceOrder({}).then(res => {
        this.orderNum = res
      })
    },
    logout() {
      uni.clearStorageSync()
      this.reLaunch('/pages/index/isLoginIndex')
    },
  }
}
</script>

<style lang="scss" scoped>
.page{
	width: 750rpx;
	min-height: 100vh;
  background: #F4F7F6;
  position: relative;
  background-repeat: no-repeat;
  background-size: 750rpx 348rpx;
  padding-bottom: 40rpx;
  .nav-version {
    width: 128rpx;
    height: 48rpx;
    line-height: 48rpx;
    text-align: center;
    background: #138E88;
    border-radius: 28rpx;
    opacity: 0.7;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 24rpx;
    color: #FFFFFF;
  }
  .validity-info {
    width: 654rpx;
    height: 116rpx;
    background: #FFF3DC;
    border-radius: 16rpx;
    border: 2rpx solid #FEAD54;
    padding: 28rpx 32rpx 40rpx;
    margin: 48rpx auto 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .info {
      display: flex;
      align-items: center;
      .logo {
        width: 48rpx;
        height: 48rpx;
        margin-right: 8rpx;
      }
      .name {
        width: 300rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #BD8622;
        margin-right: 16rpx;
      }
      .time {
        width: 200rpx;
        flex-shrink: 0;
        font-size: 24rpx;
        color: #D89C2E;
      }
    }
  }
  .icon-box {
    margin: -28rpx auto 32rpx;
    width: 686rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(11,102,97,0.2);
    border-radius: 16rpx;
    padding: 32rpx;
    .icon-title {
      display: flex;
      align-items: center;
      gap: 8rpx;
      margin-bottom: 32rpx;
      image {
        width: 32rpx;
        height: auto;
      }
      text {
        font-family: PingFang-SC, PingFang-SC;
        font-size: 24rpx;
        color: rgba(0,0,0,0.85);
      }
    }
    .icon-list {
      display: flex;
      justify-content: space-around;
      .icon-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        image {
          display: block;
          width: 96rpx;
          height: 96rpx;
          margin-bottom: 20rpx;
        }
        .text {
          font-family: PingFangSC, PingFang SC;
          font-size: 24rpx;
          color: rgba(0,0,0,0.85);
        }
      }
    }
    .model-list {
      margin-top: 48rpx;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 30rpx 32rpx;
      .model-item {
        width: 296rpx;
        height: 136rpx;
        background-repeat: no-repeat;
        background-size: 296rpx 136rpx;
        padding: 32rpx 24rpx;
        .title {
          font-family: Roboto, Roboto;
          font-weight: bold;
          font-size: 28rpx;
          line-height: 32rpx;
          margin-bottom: 6rpx;
        }
        .subtitle {
          font-family: PingFangSC, PingFang SC;
          font-size: 24rpx;
          color: rgba(0,0,0,0.85);
          line-height: 34rpx;
        }
      }
    }
  }
  .balance-box {
    margin: 0 auto 32rpx;
    width: 686rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(11,102,97,0.2);
    border-radius: 16rpx;
    padding: 32rpx;
    .balance-title {
      display: flex;
      align-items: center;
      gap: 8rpx;
      image {
        width: 32rpx;
        height: auto;
      }
      text {
        font-family: PingFang-SC, PingFang-SC;
        font-size: 24rpx;
        color: rgba(0,0,0,0.85);
      }
    }
    .balance-record {
      font-family: PingFangSC, PingFang SC;
      font-size: 24rpx;
      color: rgba(0,0,0,0.5);
    }
    .balance-list {
      display: flex;
      justify-content: space-around;
      margin-bottom: 48rpx;
      .balance-item {
        width: 192rpx;
        height: 214rpx;
        background-repeat: no-repeat;
        background-size: 192rpx 214rpx;
        padding: 116rpx 0 0;
        .title {
          text-align: center;
          font-family: Roboto, Roboto;
          font-weight: bold;
          font-size: 28rpx;
          line-height: 32rpx;
          margin-bottom: 8rpx;
        }
        .subtitle {
          text-align: center;
          font-family: PingFangSC, PingFang SC;
          font-size: 24rpx;
          color: rgba(0,0,0,0.85);
        }
      }
    }
    .balance-btn {
      width: 622rpx;
      height: 76rpx;
      background: #29C1BA;
      border-radius: 8rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8rpx;
      font-family: PingFangSC, PingFang SC;
      font-size: 24rpx;
      color: #FFFFFF;
      image {
        width: 32rpx;
        height: 32rpx;
      }
    }
  }
  .order-box {
    margin: 0 auto 32rpx;
    width: 686rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(11,102,97,0.2);
    border-radius: 16rpx;
    padding: 32rpx;
    .order-title {
      display: flex;
      align-items: center;
      gap: 8rpx;
      image {
        width: 32rpx;
        height: auto;
      }
      text {
        font-family: PingFang-SC, PingFang-SC;
        font-size: 24rpx;
        color: rgba(0,0,0,0.85);
      }
    }
    .order-record {
      font-family: PingFangSC, PingFang SC;
      font-size: 24rpx;
      color: rgba(0,0,0,0.5);
    }
    .order-list {
      display: flex;
      justify-content: space-around;
      .order-item {
        width: 296rpx;
        height: 196rpx;
        background-repeat: no-repeat;
        background-size: 296rpx 196rpx;
        padding: 62rpx 32rpx 0;
        .title {
          font-family: Roboto, Roboto;
          font-weight: bold;
          font-size: 28rpx;
          line-height: 32rpx;
          margin-bottom: 6rpx;
        }
        .subtitle {
          font-family: PingFangSC, PingFang SC;
          font-size: 24rpx;
          color: rgba(0,0,0,0.85);
        }
      }
    }
  }
  .service-box {
    margin: 0 auto;
    width: 686rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(11,102,97,0.2);
    border-radius: 16rpx;
    padding: 32rpx;
    .service-title {
      display: flex;
      align-items: center;
      gap: 8rpx;
      margin-bottom: 32rpx;
      image {
        width: 32rpx;
        height: auto;
      }
      text {
        font-family: PingFang-SC, PingFang-SC;
        font-size: 24rpx;
        color: rgba(0,0,0,0.85);
      }
    }
    .service-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .service-item {
        width: 296rpx;
        height: 196rpx;
        position: relative;
        margin-bottom: 32rpx;
        .item-bg {
          position: absolute;
          width: 296rpx;
          height: 196rpx;
          z-index: 1;
        }
        .item-content {
          z-index: 2;
          position: absolute;
          top: 52rpx;
          left: 32rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 24rpx;
          color: rgba(0,0,0,0.85);
          .item-btn {
            margin-top: 6rpx;
            width: 56rpx;
            height: auto;
          }
        }
      }
    }
  }
}
</style>
